<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="/WEB-INF/jsp/common/header.jsp" %>
<script type="text/javascript" src="${root}/easyui/jeasyui-extensions/jquery.euploadify.js"></script>
<script type="text/javascript" src="${root}/easyui/plugins/uploadify/jquery.uploadify.js"></script>
<link type="text/css" rel="stylesheet" href="${root}/easyui/plugins/uploadify/uploadify.css">
<style type="text/css">
	#images input {
		width: 200px; display:block;
	}
	#images img {
		width: 200px; display:block;
	}
</style>
</head>
<body>
	<form action="添加商品表单">
		商品名: <input type="type" name="name" /> <br/>
		商品价格: <input type="type" name="price" />
		<input type="submit" value="添加商品"/>
		<div id="images">
		</div>		
	</form>

	<hr/>
	 <input id="euploadify2" name="euploadify2" type="text"/>
     <!-- multi : 是否支持多文件上传
     	  auto : 是否自动开始上传
     	  swf:  是利用了flash 的上传文件功能, 指swf动画的位置
     	  uploader： controller 的地址
     -->
    
     <script type="text/javascript">
     	$("#euploadify2").euploadify({
     		width: 900,
            //height: 400,
            multi: true,
            multiTemplate: 'simple',
            auto: false,
            showStop: true,
            showCancel: true,
            required: true,
            swf: '${root}/easyui/plugins/uploadify/uploadify.swf',
            uploader: '${root}/upload',
            onUploadSuccess: function(file, data){
            	var json = JSON.parse(data);
            	console.log(json.filename);
            	var row = $("<div class='row'></div>");
            	$("<input type='button' value='删除'/>").click(function(){
            		$(this).parent().remove();
            	}).appendTo(row);
            	$("<input type='text' name='image' value='"+json.filename+"'>").appendTo(row);
            	$("<img src='${root}/image/"+json.filename+"'/>").appendTo(row);
            	row.appendTo("#images");
            },
            onQueueComplete: function(queueData) {
            	//$("#euploadify2").euploadify("reset");
            	$("#euploadify2").euploadify('cancel', '*')
	        }
     	});
     </script>
</body>
</html>